<template lang="html">
  <div class="">
      <div class="trends_tabs">
        <mu-container>
          <mu-tabs
           :value.sync="active"
           color="red"
           indicator-color="white"
           center
           full-width
           >
            <mu-tab>动态</mu-tab>
            <mu-tab>附近</mu-tab>
          </mu-tabs>
          <div class="demo-text detext" v-if="active === 0">
            <div class="share_list" v-for="(i,index) in share_music" :key="index">
              <div class="avater_box">
                <div class="avater_img">
                  <img :src="i.user.avatarUrl" alt="">
                </div>
                <div class="share_content">
                  <p><span class="The_prince">{{i.user.nickname}}</span> <span>{{i.info.commentThread.resourceTitle | Gostr}}</span></p>
                  <p>{{i.showTime | formatDate}}</p>
                </div>
              </div>
              <div class="music_box">
                <div class="music_table">
                  <p>{{i.json | Gojson}}</p>
                </div>
                <div class="music_like">
                  <p>
                    <img src="../../assets/images/zan.png" alt="图片显示错误">

                    <span>{{i.info.likedCount}}</span>
                  </p>
                  <p>
                    <img src="../../assets/images/comment.png" style="width:25%;" alt="图片显示错误">
                    <span>{{i.info.commentCount}}</span>
                  </p>
                  <p>
                    <img src="../../assets/images/share.png" style="width:25%;"alt="图片显示错误">
                    <span>{{i.info.shareCount}}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="demo-text" v-if="active === 1">
            <p style="color:red">暂不支持此接口</p>
            <p style="text-indent:2em;font-family:楷体;font-weight: bold;">我心中曾经执剑的少年，此刻也混迹在市井之间，但心中的热血，仍在燃烧，滚烫，灼人，且要燃上大半辈子。所谓热血的少年，青涩的爱恋，死亡与梦之约。这么好的故事，我不能演砸了。</p>
          </div>
        </mu-container>
      </div>

  </div>
</template>

<script>
export default {
  name: 'friends',
  data () {
    return {
      msg:"",
      active: 0,
      time:1548936109307,
      share_music:[]
    }
  },filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '年' + MM + '月' + d +'日';
      },
      Gostr:function(value){
        if(!value) return ""
        return value.split("：").shift()
      },
      Gojson: function(value) {
        if(!value) return '';
        value =(new Function("","return "+value))();
        return value.msg;
      }


    },methods:{

  },mounted(){
    this.axios({
      url:this.HOST+"/event",
      method:"post"
    }).then((res=>{
      console.log(res.data)
      var data=res.data.event
      this.share_music=data
      var jsonStr=data[0].json
      var json=JSON.parse(jsonStr)
      console.log(json.msg)
    })).catch(function(err){
      console.log(err)
    })



  },
}
</script>

<style lang="css">
.music_like{
  width: 74%;
  height: .7rem;
  display: flex;
  justify-content: flex-end;
  margin-bottom: .1rem;
  align-items: center;
}
.music_like p:nth-of-type(1){
  margin-left: 1rem;
}
.music_like img{
  vertical-align: middle;
}
.music_like p img:nth-of-type(1){
  width: 30%;
}
.music_table p{
  margin-left: 1rem;
}
.The_prince{
  color:#87CEFA;
  margin-right: .1rem
}
.detext{
  padding: .2rem .2rem !important;
  background: #fff;
  width: 100%;
  height: 12rem;
  overflow-y: scroll;
}
.share_list{
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 0.2rem;
}
.avater_box{
  display: flex;
  width: 100%;
  align-items: center;
}
.avater_img{
  width: 12%;
}
.share_content p{
  width: auto;
}
.share_content p:nth-of-type(1){
  height: .4rem;
  line-height: .4rem;
  margin-left: .2rem;
  font-size: .3rem;
}
.share_content p:nth-of-type(2){
  height: .3rem;
  font-size: .2rem;
  line-height: .3rem;
  margin-left: .2rem;
}
.share_content{
  width: 88%;
}
.avater_img img{
  width: 100%;
  border-radius: 50%;
  vertical-align: middle;
}
.trends_tabs{
  width: 100%;
  height: .8rem;
  background: red;
  /* color: red; */
  font-size: .3rem;
  line-height: 0.8rem;
}
.trends_tabs .container{
  width: 100%;
  padding-right:0px;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: 0px;
}
.trends_tabs .container .mu-tabs{
  background-color: red !important;
  width: 100%;
  height: 0.7rem;
}
.trends_tabs .container .mu-tabs .mu-tab,.mu-tab-active {
  flex: 0;
  max-width: 100%

}
.demo-text {
  padding: .3rem;
  background: #fff;
}
</style>
